<template>
  <div>
    <!-- <div id="home" ref="allEcharts"></div> -->
    <div style="height: 100%; width: 200px">
      <div class="treeTee">
        <el-tree
          ref="dataTreeRef"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          accordion
          highlight-current
          node-key="id"
          current-node-key="id"
          :default-checked-keys="defaultCheckedKey"
          :default-expanded-keys="defaultCheckedKey"
        >
          <template #default="{ node }">
            <div class="treeRow">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
              </span>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// 传值：item的size；横坐标；纵坐标；item的背景色；整体的背景色，上面的数字是否显示
export default {
  name: "HomeView",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultCheckedKey: [],
    };
  },
  components: {},
  methods: {
    initChart() {
      const myChart = this.$echarts.init(this.$refs.allEcharts);
      const that = this;
      let option = {};
      myChart.setOption(option, true);
    },
    handleNodeClick(data) {
      if (data.children && data.children.length !== 0) {
        console.log(data, "点击父级");
        let childdata = this.findChild(data);
        // 高亮
        this.$refs.dataTreeRef.setCurrentKey(childdata.id);
        // 默认展开到这一层
        this.defaultCheckedKey = [childdata.id];
      } else {
        console.log(data, "点击子项！！！");
      }
    },
    initTreeData() {
      setTimeout(() => {
        this.data = [
          {
            label: "一级 1fhweofihwefwifhweifweiofwehfiowehfjiweh",
            id: "1",
            children: [
              {
                label: "二级 1-1",
                id: "11",
                children: [
                  {
                    label:
                      "三级 1-1-1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                    id: "111",
                  },
                ],
              },
            ],
          },
          {
            label: "一级 2",
            id: "2",
            children: [
              {
                label: "二级 2-1",
                id: "21",
                children: [
                  {
                    id: "211",
                    label: "三级 2-1-1",
                  },
                ],
              },
              {
                id: "22",
                label: "二级 2-2",
                children: [
                  {
                    id: "221",
                    label: "三级 2-2-1",
                  },
                ],
              },
            ],
          },
          {
            id: "3",
            label: "一级 3",
            children: [
              {
                id: "31",
                label: "二级 3-1",
              },
              {
                id: "32",
                label: "二级 3-2",
                children: [
                  {
                    id: "321",
                    label: "三级 3-2-1",
                  },
                ],
              },
            ],
          },
          {
            id: "4",
            label: "一级 4",
            children: [
              {
                id: "41",
                label: "二级 4-1",
              },
            ],
          },
        ];
        // 必须加载完数据再高亮树
        this.$nextTick(() => {
          // 写 nextTick 函数的原因是，当数据改变的时候，元素也会更改，必须在有这些元素之后再高亮
          this.initTreeSet();
        });
      }, 500);
    },
    initTreeSet() {
      if (this.$refs.dataTreeRef) {
        this.defaultCheckedKey = ["211"];
        this.$refs.dataTreeRef.setCurrentKey("211");
      }
    },
    findChild(obj) {
      if (obj.children && obj.children.length > 0) {
        return this.findChild(obj.children[0]); // 必须加上 return
      } else {
        return obj;
      }
    },
  },
  mounted() {
    this.initTreeData();
  },
};
</script>
<style lang="scss" scoped>
#home {
  width: 1000px;
  height: 800px;
  border: 1px solid;
}
.treeTee {
  height: 100%;
  overflow: auto;
  // 超出滚动，且滚动条隐藏
  &::-webkit-scrollbar {
    height: 0;
    width: 0;
  }
  // 对每一项整行进行设置行样式
  &:deep(.el-tree-node__content) {
    height: 40px;
    line-height: 40px;
    background-color: beige;
    color: #05f;
  }
  // 对子项进行超出滚动，且滚动条隐藏
  &:deep(.treeRow) {
    overflow: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      height: 0;
      width: 0;
    }
  }
  // 子节点前面的缩进
  &:deep(.el-tree-node__expand-icon.is-leaf) {
    width: 10px;
  }
  // 点击的时候，项高亮
  &:deep(
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content
    ) {
    background-color: #e0f3ff;
    color: #2d8ac4;
  }
}
</style>
